<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2023-12-26 11:10:05
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 时间组件,支持多类型显示
   类型字段:type
   赋值格式:
   date "2019/01/01"
   time "15:00:12"
   datetime "2019/01/01 15:00:12"
   range ["2019/01/01", "2019/01/06"]
   rangetime ["2019/01/08 14:00", "2019/01/16 13:59"]
 * @FilePath: \smart-sports-managee:\project\autopilot\App\components\time\time.vue
-->
<template>
  <view class="ltime">
    <view class="time-container" :class="type" :style="{ color: color }" @click="DatePicker(type)">
      <block v-if="type == 'range' || type == 'rangetime'">
        <view class="start">
          <view class="range-title">{{ rangeObj[0].title }}</view>
          <view class="range-inner">{{ rangeObj[0].date }}</view>
          <view class="type-label">开始时间</view>
        </view>
        <image model="aspectFit" class="time-right-icon" src="../../static/img/icon/time-right.png"></image>
        <view class="end">
          <view class="range-title">{{ rangeObj[1].title }}</view>
          <view class="range-inner">{{ rangeObj[1].date }}</view>
          <view class="type-label">结束时间</view>
        </view>
      </block>
      <block v-else>
        <view class="label">{{ label }}</view>
        <view class="time-inner">
          <view class="time-button">{{ time }}</view>
          <image model="aspectFit" class="arrow-right-icon" src="../../static/img/icon/arrow-right.png"></image>
        </view>
      </block>
    </view>
    <mx-date-picker v-if="!disable" :show.sync="showPicker" :type="type" :value="value" :show-tips="true"
      :begin-text="'开始'" :end-text="'结束'" :show-seconds="false" @confirm.self="ed" @cancel.self="ed" />
  </view>
</template>

<script>
import MxDatePicker from "@/components/time/mx-datepicker.vue";

export default {
  name: "lTime",
  components: {
    MxDatePicker,
  },
  props: {
    label: {
      type: String,
      default: "",
    },
    mark: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    datetime: [String, Array, Date],
    disable: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      showPicker: false,
      time: this.datetime,
      value: "",
      rangeObj: [],
    };
  },
  computed: {},
  onLoad(d) { },
  onShow() { },
  created() {
    if (Object.prototype.toString.call(this.datetime) === "[object Date]") {
      switch (this.type) {
        case "date":
          this.time = this.datetime.format("Y-m-d");
          break;
        case "time":
          this.time = this.datetime.format("H:i");
          break;
        case "datetime":
          this.time = this.datetime.format("Y-m-d H:i");
          break;
        case "range":
          this.time = [
            this.datetime.format("Y-m-d"),
            this.datetime.format("Y-m-d"),
          ];
          this.time.map((v) => {
            this.rangeObj.push({ title: this.getWeek(v), date: v });
          });
          break;
        case "rangetime":
          this.time = [
            this.datetime.format("Y-m-d H:i"),
            this.datetime.format("Y-m-d H:i"),
          ];
          this.time.map((v) => {
            this.rangeObj.push({
              title: `${this.datetime.format("m")}月${this.datetime.format(
                "d"
              )}日${this.getWeek(v)}`,
              date: this.datetime.format("H:i"),
            });
          });

          break;
      }
    } else {
      switch (this.type) {
        case "range":
          this.datetime.map((v) => {
            this.rangeObj.push({
              title: this.getWeek(v),
              date: new Date(v.replace(/-/g, '/')).format("Y-m-d"),
            });
          });
          break;
        case "rangetime":
          this.datetime.map((v) => {
            this.rangeObj.push({
              title: `${new Date(v.replace(/-/g, '/')).format("m")}月${new Date(v.replace(/-/g, '/')).format(
                "d"
              )}日${this.getWeek(v)}`,
              date: new Date(v.replace(/-/g, '/')).format("H:i"),
            });
          });
          break;
      }
    }
  },
  methods: {
    getWeek(v) {
      let week = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      return week[new Date(v.replace(/-/g, '/')).getDay()];
    },
    DatePicker(type) {
      this.type = type;
      this.value = this.time;
      this.showPicker = true;
    },
    ed(e) {
      this.showPicker = false;
      if (e) {
        switch (this.type) {
          case "date":
            this.time = e.date.format("Y-m-d");
            break;
          case "time":
            this.time = e.value;
            break;
          case "datetime":
            this.time = e.value.replace(/\//g, "-");
            break;
          case "range":
            e.date.map((v, i) => {
              this.time[i] = v.format("Y-m-d");
              this.rangeObj[i] = {
                title: this.getWeek(v),
                date: this.time[i],
              };
            });
            break;
          case "rangetime":
            e.date.map((v, i) => {
              this.time[i] = v.format("Y-m-d H:i");
              this.rangeObj[i] = {
                title: `${v.format("m")}月${v.format("d")}日${this.getWeek(v.format("Y-m-d H:i"))}`,
                date: v.format("H:i"),
              };
            });
            break;
        }
        this.$emit("update:datetime", this.time);
        if (this.type == "date") {
          this.$emit("change", { value: this.time, key: this.mark });
        } else {
          this.$emit("change", { starttime: this.time[0], endtime: this.time[1], key: this.mark });
        }
      }
    },
  },
};
</script>
<style lang='less' scoped>
.time-container {
  .flex();
  background: #ffffff;

  .label {
    width: 180upx;
    color: #c7c7c8;
  }

  .time-inner {
    .flex(row, flex-end);
    width: calc(100% - 180upx);
  }

  .time-button {
    padding-right: 20upx;
    margin-top: -6upx;
    width: calc(100% - 18upx);
    text-align: right;
    color: #1d256e;
  }

  .range-title {
    font-size: 28upx;
  }

  .range-inner {
    padding: 10upx 0;
  }

  .type-label {
    display: inline-block;
    padding: 8upx 20upx;
    font-size: 24upx;
    color: #c7c7c8;
    background: rgba(136, 137, 144, 0.1);
    border-radius: 7upx;
  }
}

.time-right-icon {
  width: 18upx;
  height: 43upx;
}

.date,
.time,
.datetime {
  padding: 40upx;
}

.range,
.rangetime {
  padding: 30upx 40upx;
  color: #1d256e;
}

.range {
  .range-inner {
    font-size: 40upx;
  }
}

.rangetime {
  .range-inner {
    font-size: 62upx;
  }
}
</style>